

<template>
    <el-card class="box-card">
        <div class="bread-crumb">
            <el-breadcrumb separator=">">
                <!-- 预设一个首面包屑 -->

                <el-breadcrumb-item :to="{ path: '/Dashboard/analysis' }">
                    <el-button color="#83cdc4" >
                        <span style="color:white !important">首页</span>
                    </el-button>
                </el-breadcrumb-item>

                <!--  循环遍历面包屑列表 -->
                <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">
                    <el-button color="#83cdc4" >
                        <span style="color:white !important">{{ item.meta.label }}</span>
                    </el-button>
                </el-breadcrumb-item>
            </el-breadcrumb>

            <!-- <router-view></router-view> -->
        </div>
    </el-card>
</template>

<script>

export default {
    name: "Breadcrumb",
    data() {
        return {
            breadList: []
        }
    },
    created() {
        this.getBreadcrumb();
        // console.log(this.breadList)
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    },
    methods: {
        getBreadcrumb() {
            // console.log(this.$route.matched)  //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组

            this.breadList = this.$route.matched.slice(1)

        }

    },
}
</script>

<style scoped>
.el-card {
    margin-top: -10px
}

.el-card :deep(.el-card__body) {
    padding: 4px
}
</style>

